<!--[if lte IE 9]>
<div class="alert alert-warning">
    {{ _( "Your browser is obsolete. Partial functionality will not be available." ) }}<br>
    {{ _( "The latest Chrome browser is recommended." ) }}
</div>
<![endif]-->
<h4>{{ _( "Status" ) }}</h4>
<table id="status" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th width="25%">{{ _( "Property" ) }}</th>
            <th>{{ _( "Value" ) }}</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{ _( "All IP Number" ) }}</td>
            <td id="all-ip-num"></td>
        </tr>
        <tr>
            <td>{{ _( "Left Number" ) }}</td>
            <td id="left-num"></td>
        </tr>
        <tr>
            <td>{{ _( "Good IP Number" ) }}</td>
            <td id="good-num"></td>
        </tr>
    </tbody>
</table>

    <div class="row-fluid">
        <div class="span12">
            <button class="btn btn-primary btn-block" id="check_start" type="submit">{{ _( "Run" ) }}</button>
        </div> <!-- .span12 -->
    </div> <!-- .row-fluid -->

<script type="text/javascript">
    function updateStatus(selector, content) {
        var previousContent = $(selector).html();
        if (String(previousContent) != String(content)) {
            $(selector).html(content);
        }
    }
    function updateProcess() {
        $.ajax({
            type: 'GET',
            url: '/module/gae_proxy/control/check_ip?cmd=get_process',
            dataType: 'JSON',
            success: function(result) {
                var updates = {
                    '#all-ip-num': result['all_ip_num'],
                    '#left-num': result['left_num'],
                    '#good-num': result['good_num'],
                }
                for (var item in updates) {
                    updateStatus(item, updates[item]);
                }

                if ( result['left_num'] == 0 ){
                    enableStartButton();
                }else{
                    disableStartButton();
                }

                if ( !tipHasClose() ) {
                    tipClose();
                }
            },
            error: function(result) {
                tip('{{ _( "No response from GAEProxy process. It might have already exited." ) }}', 'warning', false);
            }
        });
    }
    function enableStartButton(){
        if ($('#check_start').hasClass("btn-inverse")){
            $('#check_start').removeClass('btn-inverse');
            $('#check_start').addClass('btn-primary');
            $('#check_start').html('{{ _( "Run" ) }}');
        }
    }
    function disableStartButton(){
        if ($('#check_start').hasClass("btn-primary")){
            $('#check_start').removeClass('btn-primary');
            $('#check_start').addClass('btn-inverse');
            $('#check_start').html('{{ _( "Stop" ) }}');
        }
    }
</script>

<script type="text/javascript">
    $('button.btn').click(function() {
        if ( $('#check_start').html() == '{{ _( "Run" ) }}' ){
            $.ajax({
                type: 'GET',
                url: '/module/gae_proxy/control/check_ip?cmd=start',
                dataType: 'JSON',
                success: function(result) {
                    window.timer.play();

                    disableStartButton();

                    if ( !tipHasClose() ) {
                        tipClose();
                    }
                },
                error: function(result) {
                    tip('{{ _( "No response from GAEProxy process. It might have already exited." ) }}', 'warning', false);
                }
            });
        }else{
            $.ajax({
                type: 'GET',
                url: '/module/gae_proxy/control/check_ip?cmd=stop',
                dataType: 'JSON',
                success: function(result) {
                    if ( !tipHasClose() ) {
                        tipClose();
                    }
                },
                error: function(result) {
                    tip('{{ _( "No response from GAEProxy process. It might have already exited." ) }}', 'warning', false);
                }
            });
        }
    });
</script>

<script type="text/javascript">
    $(function() {

        window.timer  = $.timer(function() {
            updateProcess();
        });

        window.timer.set({
            time: 1000,
            autostart: true
        });

        updateProcess();
    });
</script>